<template>
  <div style="width:100%; height:100%;">
    <div id="container"></div>

    <el-dialog title="获取搜索缓存" :visible.sync="dialogTableVisible">
      缓存信息：Xxx
    </el-dialog>
  </div>
</template>

<script>
import {Graph} from '@antv/x6'
import {Snapline} from '@antv/x6-plugin-snapline'
import {Selection} from '@antv/x6-plugin-selection'
import {DagreLayout} from '@antv/layout'
import {Scroller} from '@antv/x6-plugin-scroller'

import demoViewNodeData from './demo-view-node-data'
import demoViewEdgeData from './demo-view-edge-data'

export default {
  name: "demo-view",
  data() {
    return {
      dialogTableVisible: false
    }
  },
  mounted() {
    const graph = new Graph({
      container: document.getElementById('container'),
      width: 800,
      height: document.body.scrollHeight - 90,
      autoResize: true,
      interacting: {
        edgeLabelMovable: true,
      },
      grid: {
        size: 10,
        visible: true,
        type: 'doubleMesh',
        args: [
          {
            color: '#eee',
            thickness: 1,
          },
          {
            color: '#ddd',
            thickness: 1,
            factor: 4,
          },
        ],
      },
      background: {
        color: '#ffffff',
      },
      connecting: {
        allowBlank: true,
      },
      selecting: {
        enabled: true,
        className: 'node-selecting',
        rubberband: true,
        rubberNode: true,
        movable: true
      },
      snapline: {
        enabled: true,
        sharp: true,
      },
      keyboard: {
        enabled: true
      },
    })
    const data = {
      nodes: demoViewNodeData,
      edges: demoViewEdgeData
    }
    console.log(data)
    graph.fromJSON(data)

    // https://x6.antv.antgroup.com/tutorial/basic/events
    // graph.addNode({})
    // graph.addNodes(demoViewNodeData)
    // graph.centerContent()

    // graph.on('node:click', ({e, x, y, node, view}) => {
    //   console.log(e)
    //   console.log(x)
    //   console.log(y)
    //   console.log(node)
    //   console.log(view)
    // })
    //
    // graph.on('node:mouseenter', ({e, node, view}) => {
    //   alert("eeee")
    // })
    // graph.on('cell:click', ({ e, x, y, cell, view }) => {})
    //   graph.on('node:click', ({ e, x, y, node, view }) => {})
    //   graph.on('edge:click', ({ e, x, y, edge, view }) => {})
    //   graph.on('blank:click', ({ e, x, y }) => {})
    //
    //   graph.on('cell:mouseenter', ({ e, cell, view }) => {})
    //   graph.on('node:mouseenter', ({ e, node, view }) => {})
    //   graph.on('edge:mouseenter', ({ e, edge, view }) => {})
    //   graph.on('graph:mouseenter', ({ e }) => {})

    graph.on('edge:mouseenter', ({e, edge, view}) => {
      edge.store.data.historyInfo.attrs = edge.getAttrs()
      edge.store.data.historyInfo.labels = edge.getLabels()

      let tempData = edge.store.data;
      let hover = tempData.extendFunc.hover;
      // hover 的标准反参，可选配置

      edge.setAttrs(tempData.consumerInfo.attrs)
      edge.setLabels(tempData.consumerInfo.labels)
    })

    graph.on('edge:mouseleave', ({e, edge, view}) => {
      edge.setAttrs(edge.store.data.historyInfo.attrs)
      edge.setLabels(edge.store.data.historyInfo.labels)
    })


    let vm = this
    graph.on('edge:click', ({e, x, y, edge, view}) => {
      vm.dialogTableVisible = true
    })

    graph.use(
      new Snapline({
        enabled: true,
        clean: false,
      }),
    )

    graph.use(
      new Selection({
        enabled: true,
        multiple: true,
        rubberband: true,
        movable: true,
        showNodeSelectionBox: true,
      }),
    )
    graph.use(
      new Scroller({
        enabled: true,
      }),
    )

    // https://x6.antv.antgroup.com/temp/layout#dagre
    const dagreLayout = new DagreLayout({
      type: 'dagre',
      rankdir: 'LR',
      align: undefined,
      ranksep: 50,
      nodesep: 15,
      controlPoints: true,
      preventOverlap: true
    })

    const newModel = dagreLayout.layout(data)
    console.log(newModel)

    graph.fromJSON(newModel)
  }
}


</script>

<style scoped>

</style>
